<template>
  <div
    class="user-avatar"
    :style="{
      width: `${width}px`,
      height: `${width}px`,
    }"
  >
    <el-image
      :width="width"
      :src="avatarUrl"
      fit="scale-down"
      :style="{ 'border-radius': `${borderRadius}px` }"
    ></el-image>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  userId: {
    type: String,
  },
  width: {
    type: Number,
    default: 40,
  },
  borderRadius: {
    type: Number,
    default: 0,
  },
  showDetail: {
    type: Boolean,
    default: false,
  },
  avatarUrl: {
    type: String,
    default: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
  },
});
</script>

<style scoped lang="scss">
.user-avatar {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
</style>
